<template>
  <div class="app-container h-100">
    <el-container class="h-100">
      <el-aside width="300px" style="background: #ffffff">
        <leftTree
          tabDefaultData="region"
          :isDefault="true"
          @tree-check-change="treecheckchange"
          :leftlabel="'河流'"
          :regionApiParms="{
            segmentTypeDrink: 'filter',
            segmentType: 'IsAuto',
          }"
          :apiType="'segmentRiverTree'"
          :apiParms="{ segmentType: 'IsAuto', segmentTypeDrink: 'filter' }"
        ></leftTree>
      </el-aside>
      <el-main>
        <el-row>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="实时数据" name="isnew"></el-tab-pane> -->
            <el-tab-pane label="历史数据" name="ishis"></el-tab-pane>
            <el-tab-pane label="超标数据" name="ismore"></el-tab-pane>
          </el-tabs>
        </el-row>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="时间：" v-if="activeName != 'isnew'">
            <el-date-picker
              v-model="timeRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
                        <el-button type="primary">导出</el-button>
                    </el-form-item> -->
        </el-form>
        <el-table :data="listData" style="width: 100%" v-loading="loading">
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column prop="segmentname" label="站点"></el-table-column>
          <el-table-column
            prop="sampletime"
            label="监测时间"
            width="150"
          ></el-table-column>
          <el-table-column prop="targetlevelname" label="控制级别">
            <!-- 0 国控 1 省控 2 市控 3 县控 -->
            <template slot-scope="scope">
              <span
                v-if="scope.row.controlLevelCode === '0'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border: 1px solid #ffb6c1;
                  border-radius: 4px;
                  color: #ffb6c1;
                "
                >{{ scope.row.controlLevel }}</span
              >
              <span
                v-else-if="scope.row.controlLevelCode === '1'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border: 1px solid #add8e6;
                  border-radius: 4px;
                  color: #add8e6;
                "
                >{{ scope.row.controlLevel }}</span
              >
              <span
                v-else-if="scope.row.controlLevelCode === '2'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border: 1px solid #ffa500;
                  border-radius: 4px;
                  color: #ffa500;
                "
                >{{ scope.row.controlLevel }}</span
              >
              <span
                v-else-if="scope.row.controlLevelCode === '3'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border: 1px solid #90ee90;
                  border-radius: 4px;
                  color: #90ee90;
                "
                >{{ scope.row.controlLevel }}</span
              >
              <span
                v-else
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border: 1px solid #90ee90;
                  border-radius: 4px;
                  color: #90ee90;
                "
                >{{ scope.row.controlLevel }}</span
              >
              <!-- <dict-tag v-else :options="dict.type.sys_control_level" :value="scope.row.controlLevelCode"></dict-tag> -->
            </template>
          </el-table-column>
          <el-table-column prop="qualitylevelname" label="水质类别" width="120">
            <!-- I 类 Ⅱ类 Ⅲ类  Ⅳ类 Ⅴ类 劣Ⅴ类-->
            <template slot-scope="scope">
              <span
                v-if="scope.row.qualitylevelname === 'Ⅰ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #0dcece;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else-if="scope.row.qualitylevelname === 'Ⅱ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #00ccff;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else-if="scope.row.qualitylevelname === 'Ⅲ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #00ff00;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else-if="scope.row.qualitylevelname === 'Ⅳ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #878721;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else-if="scope.row.qualitylevelname === 'Ⅴ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #ff9b00;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else-if="scope.row.qualitylevelname === '劣Ⅴ类'"
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #ff0000;
                  font-size: 13px;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
              <span
                v-else
                style="
                  display: inline-block;
                  padding: 2px 10px;
                  border-radius: 4px;
                  color: #ff0000;
                "
                >{{ scope.row.qualitylevelname }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="targetlevelname"
            label="目标水质"
            width="100"
          ></el-table-column>
          <el-table-column prop="isoverstandard" label="是否超标" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isoverstandard == 0" type="success"
                >达标</el-tag
              >
              <el-tag v-else type="danger">超标</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="overstandarddescribe"
            label="超标描述"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="temp"
            label="水温（℃）"
            width="120"
          ></el-table-column>
          <el-table-column prop="pH" label="PH" width="120"></el-table-column>
          <el-table-column
            prop="DO"
            label="溶解氧（mg/L）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="cond"
            label="电导率（μS/cm）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="NTU"
            label="浑浊度（NTU）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="CODMn"
            label="高猛酸盐指数（mg/L）"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="NH4N"
            label="氨氮（mg/L）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="TP"
            label="总磷（mg/L）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="TN"
            label="总氮（mg/L）"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="Wq"
            label="流量（m³/s）"
            width="120"
          ></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// import {segmentRiverTree,convertToTree} from '@/api/tool/tree.js'
import { autonewdatalist, autohisdatalist } from "./api/auto.js";
import leftTree from "../../dataResources/waterJcData/monitor/sgMonitor/components/leftTree.vue";
export default {
  dicts: ["sys_control_level"],
  components: {
    leftTree,
  },
  data() {
    return {
      activeName: "ishis",
      listData: [],
      treeData: [],
      defautltTreeKeys: [],
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      timeRange: [],
      loading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
    };
  },
  created() {
    this.createdFn();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.handleQuery();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.handleQuery();
    },
    async createdFn() {
      let nowtime = $moment().format("{y}-{m}-{d}");
      let startTime = $moment().offset("day", -6).format("{y}-{m}-{d}");
      this.timeRange = [startTime, nowtime];
      // await this.getTreeData();
      // await this.autonewdatalistFn()
    },
    handleClick(tab, event) {
      this.autonewdatalistFn();
    },
    handleQuery() {
      this.autonewdatalistFn();
    },
    getTreSelctedKeys() {
      let keys = this.treeData.map((item) => item.id);
      return keys;
    },
    async autonewdatalistFn() {
      this.loading = true;
      this.total = 0;
      let keys = this.getTreSelctedKeys();
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime: this.timeRange[0] + " 00:00:00",
        endTime: this.timeRange[1] + " 23:59:59",
        segmentid: keys.join(","),
        isoverstandard: "",
        isitontimedata: "",
      };
      let apifn;
      if (this.activeName == "isnew") {
        params.startTime = "";
        params.endTime = "";
        apifn = autonewdatalist;
      } else {
        if (this.activeName == "ishis") {
          params.isoverstandard = "";
          params.isitontimedata = "";
        } else {
          params.isoverstandard = "1";
          params.isitontimedata = "";
        }
        apifn = autohisdatalist;
      }
      let res = await apifn(params);
      this.listData = res.rows;
      this.total = res.total;
      this.loading = false;
    },
    treecheckchange(nodes) {
      this.treeData = [...nodes];
      this.autonewdatalistFn();
    },
    // autohisdatalistFn(){},
    // async getTreeData(){
    //     let params = {
    //         segmentType:"IsAuto",
    //     }
    //     let res = await segmentRiverTree(params);
    //     this.treeData = convertToTree(res.data || []);
    //     if(this.treeData[0]) {
    //         this.expandedKeys = [this.treeData[0].id];
    //     }
    //     this.defautltTreeKeys = this.getdefaultKeys(this.treeData)
    // },
    getdefaultKeys(data) {
      let first = (data && data[0]) || null;
      if (first) {
        if (first.children && first.children.length) {
          return this.getdefaultKeys(first.children);
        } else {
          return [first.id];
        }
      } else {
        return [];
      }
    },
  },
};
</script>
<style scoped lang="scss">
.h-100 {
  height: 100%;
}
</style>
